<template>
  <div class="indexBasePan" >
    <div class="titlePan" >
      列表
    </div>
    <div style="height:50px;" ></div>
    <div style="height:10px" ></div>
    <div class="myBandList" >
      <div v-for="item in arr" :key="item.id" >
        <a-card class="BandItemPan" >
          <div class="ItemContentPan" >
            <div style="wdith:30%" >
              <div class="bandImg" ></div>
            </div>
            <div style="width:5%" ></div>
            <div style="width:65%" >
              <div class="namePan" >{{ item.name }}</div>
              <div  class="contentPan" >{{ item.content }}</div>
            </div>
          </div>
          <div style="height:5px;" ></div>
          <div>
            热门歌曲:
          </div>
          <div style="height:5px;" ></div>
          <div class="bandTagPan" >
            <a-tag color="green" v-for="one in item.sings" :key="one" >
              {{ one }}
            </a-tag>
          </div>
          <div style="height:10px;" ></div>
          <div class="bandButtonPan" >
            <div style="height:10px;" ></div>
            <a-button size="small" type="primary" @click="goToYuyue" >预约演出</a-button>
            &nbsp;&nbsp;
            <a-button size="small" @click="goToDetail" >查看更多</a-button>
          </div>
        </a-card>
        <div style="height:10px;" ></div>
      </div>
    </div>
    <a-modal style="top: 0px" :keyboard="false" :maskClosable="false" v-model:visible="yuyueVisible" title="预约演出">
      <div>
        <a-form 
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        name="yuyueForm"
        >
          <a-form-item label="时间" >
             <a-date-picker></a-date-picker>
          </a-form-item>
           <a-form-item label="地点" >
            <a-input></a-input>
          </a-form-item>
           <a-form-item label="说明" >
            <a-input></a-input>
          </a-form-item>
          <a-form-item label="联系方式" >
            <a-input></a-input>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-button key="submit" type="primary" :loading="loading" @click="handleYuyueVOk">
          提交
        </a-button>
      </template>
    </a-modal>
    <a-modal style="top: 0px" v-model:visible="detailVisible" title="乐队资料" @ok="handleDetailVOk">
      <div class="myBandDetail" >
        <a-card class="BandItemPan" >
          <div class="ItemContentPan" >
            <div style="wdith:30%" >
              <div class="bandImg" ></div>
            </div>
            <div style="width:5%" ></div>
            <div style="width:65%" >
              <div class="namePan" >
                乐队名称乐队名称乐队名称乐队名称乐队名称乐队名称
              </div>
              <div  class="contentPan" >
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
                乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍乐队介绍
              </div>
            </div>
          </div>
          <div style="height:5px;" ></div>
          <div>
            热门歌曲:
          </div>
          <div style="height:5px;" ></div>
          <div class="bandTagPan" >
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
            <a-tag color="green" class="bandTagItem" >
              热门歌曲
            </a-tag>
          </div>
          <div style="height:10px;" ></div>
        </a-card>
      </div>
      <template #footer>
        <a-button key="submit" type="primary" :loading="loading" @click="handleDetailVOk">
          预约演出
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useSystemStoreOut } from '@/store/modules/bottomMenu';

export default defineComponent({
    name:'HomeIndex',
    setup() {
        const yuyueVisible = ref(false);
        const detailVisible = ref(false);
        const arr = ref([]);
        for(let i=0; i< 20; i++){
          arr.value.push({
            id:i+i,
            name:"那个乐队那个乐队那个乐队那个乐队",
            content:"这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍"+
            "这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍"+
            "这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍"+
            "这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍"+
            "这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍这是那个乐队的介绍",
            sings:['歌曲1','歌曲2歌曲2歌曲2','歌曲3','歌曲4',
            '歌曲5','歌曲6','歌曲7','歌曲8','歌曲9',],
          })
        }
        const systemStore = useSystemStoreOut();
        systemStore.setBottomIndex(0);
        const currentMenu = ref('1');
        const changeMenu = (v)=>{
          currentMenu.value=v;
        }
        const goToYuyue = () => {
          yuyueVisible.value=true;
        };
        const goToDetail = () => {
          detailVisible.value=true;
        };
        const handleYuyueVOk = ()=>{
          yuyueVisible.value=false;
        }
        const handleDetailVOk = ()=>{
          detailVisible.value=false;
          goToYuyue();
        }
        return {
          changeMenu,
          currentMenu,
          arr,
          yuyueVisible,
          handleYuyueVOk,
          goToYuyue,
          detailVisible,
          handleDetailVOk,
          goToDetail,
        }
    }
})
</script>

<style lang="less" scoped>
  .indexBasePan{
    .titlePan{
      width: 100%;
      height: 50px;
      border: solid 1px rgb(241, 243, 244);
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
      position: fixed;
      z-index: 99;
      background-color: white;
    }
    
    .myBandList {
      width: 96%;
      margin: 0 auto;
      .BandItemPan{
        width: 100%;
        .ItemContentPan{
          display: flex;
          flex-direction: row;
          .bandImg{
            width: 60px;
            height: 60px;
            background-color: rgb(104, 142, 255);
          }
          .namePan{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            font-size: 18px;
            font-weight: bold;
            padding-bottom: 10px;
          }
          .contentPan{
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
            overflow:hidden;
            font-size: 15px;
            color: rgb(110, 110, 110);
          }
        }
        .bandTagPan{
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .bandButtonPan{
          text-align: right;
          border-top: solid 1px rgb(241, 243, 244);
        }
      }
    }
  }
  :deep(.ant-picker){
    width: 100%;
  }
</style>

<style>
.myBandDetail .BandItemPan {
  width: 100%;
}
.myBandDetail .BandItemPan .ItemContentPan {
  display: flex;
  flex-direction: row;
}

.myBandDetail .BandItemPan .ItemContentPan .bandImg{
  width: 60px;
  height: 60px;
  background-color: rgb(104, 142, 255);
}

.myBandDetail .BandItemPan .ItemContentPan .namePan{
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 10px;
}

.myBandDetail .BandItemPan .ItemContentPan .bandImg{
  width: 60px;
  height: 60px;
  background-color: rgb(104, 142, 255);
}

.myBandDetail .BandItemPan .ItemContentPan .contentPan{
  display:-webkit-box;
  font-size: 15px;
  color: rgb(110, 110, 110);
}

.myBandDetail .BandItemPan .bandTagItem{
  margin-top: 10px;
}
</style>